<template>
    <div class="my-order">
        <div class="my-title">我的订单</div>

        <div class="main">
            <div v-if="orderList.length > 0" class="table-header">
                <div style="width: 320px">订单详情</div>
                <div style="width: 200px">金额</div>
                <div style="width: 170px">订单状态</div>
                <div>操作</div>
            </div>

            <div class="order-list">
                <div
                    v-for="(item, index) in orderList"
                    :key="index"
                    class="order-item"
                >
                    <div class="order-id">
                        {{ item.pay_time_text
                        }}<span>订单号：{{ item.order_sn }}</span>
                    </div>
                    <div class="order-info">
                        <div class="order-title">
                            <div style="margin-right: 14px">
                                <el-image
                                    class="order-img"
                                    fit="cover"
                                    :src="'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/order-vip.png'"
                                    lazy
                                ></el-image>
                                <div
                                    v-if="item.combo_id"
                                    style="text-align: center"
                                >
                                    {{ item.combo_name }}
                                </div>
                            </div>
                        </div>
                        <div class="money">￥{{ item.money }}</div>
                        <div class="order-status">交易完成</div>
                        
                    </div>
                </div>
                <div v-if="orderList == 0">
                    <el-empty description="暂无数据"></el-empty>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { mybuyrecord } from "@/assets/api/userCenterApi";
export default {
    metaInfo() {
        return {
            title: "个人中心-我的订单",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            orderList: [],
        };
    },
    mounted() {
        this.mybuyrecord();
    },
    computed: {},
    methods: {
        async mybuyrecord() {
            const res = await mybuyrecord({});
            if (res.code == 1) {
                this.orderList = res.data;
            }
        },
        goVip() {
            this.$router.push({
                path: "/user/myvip",
            });
        },

    },
};
</script>
  
<style lang="scss" scoped>
.my-order {
    background: #fff;
    margin-left: 20px;
}

.my-title {
    font-size: 18px;
    color: #333333;
    height: 80px;
    line-height: 80px;
    padding-left: 45px;
    border-bottom: 1px solid #ededed;
}

.main {
    padding: 17px 45px;
}
.table-header {
    height: 55px;
    line-height: 55px;
    background: #ededed;
    box-sizing: border-box;
    padding: 0 29px;
    display: flex;
    align-items: center;
    div {
        font-size: 14px;
        color: #333333;
    }
}

.order-list {
    padding: 12px 0;
}

.order-item {
    margin-bottom: 12px;
    border: 1px solid #eaeaea;
    .order-id {
        padding-left: 29px;
        font-size: 12px;
        color: #333333;
        height: 50px;
        line-height: 50px;
        background: #f6f6f6;
        span {
            color: #666666;
            padding-left: 13px;
        }
    }
    &:hover {
        border-color: #d9ecff;
        .order-id {
            background-color: #eef7ff;
        }
    }
}
.order-info {
    display: flex;
    align-items: center;
    padding: 15px 29px;

    .order-title {
        width: 320px;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        padding-right: 50px;
        display: flex;
        align-items: center;
        .order-img {
            width: 100px;
            min-width: 100px;
            height: 64px;
            border-radius: 4px;
            display: block;
        }
        span {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .money {
        width: 200px;
        font-size: 16px;
        color: #fa5151;
    }

    .order-status {
        width: 170px;
        font-size: 14px;
        color: #666666;
    }

    .button {
        width: 100px;
        height: 30px;
        border-radius: 67px 67px 67px 67px;
        border: 1px solid #1c87f3;
        font-size: 14px;
        color: #1c87f3;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        &:hover {
            background-color: #1c87f3;
            color: #ffffff;
        }
        &:active {
            background-color: #197adb;
        }
    }
}
</style>
  ./myOrderForm.vue./myorderform.vue